// cache
let rootFontSize;

function getRootFontSize() {
	if (!rootFontSize) {
		const doc = document.documentElement;
		const fontSize =
			doc.style.fontSize || window.getComputedStyle(doc).fontSize;

		rootFontSize = parseFloat(fontSize);
	}

	return rootFontSize;
}

function convertRem(value) {
	value = value.replace(/rem/g, '');
	return +value * getRootFontSize();
}

function convertVw(value) {
	value = value.replace(/vw/g, '');
	return (+value * windowWidth.value) / 100;
}

function convertVh(value) {
	value = value.replace(/vh/g, '');
	return (+value * windowHeight.value) / 100;
}

export function unitToPx(value) {
	if (typeof value === 'number') {
		return value;
	}

	if (inBrowser) {
		if (value.includes('rem')) {
			return convertRem(value);
		}
		if (value.includes('vw')) {
			return convertVw(value);
		}
		if (value.includes('vh')) {
			return convertVh(value);
		}
	}

	return parseFloat(value);
}


export function getZIndexStyle(zIndex) {
	const style = {};
	if (zIndex) {
		style.zIndex = +zIndex;
	}
	return style;
}